<script setup lang="ts">

import {ref, watch} from "vue";
import {cloneDeep} from "lodash-es";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  },
  lists:{
    type:Array,
    default(){
      return []
    }
  }
})

const option = ref({});

const setOption = async (yData: any[], yData2: any[], yData3: any[],xData:any[]) => {
  option.value = {
    xAxis: [{
      type: "category",
      data: xData,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#CCCCCC",
          type: 'dashed',
        },
      },
      axisLine: {
        show:true,
        lineStyle: {
          color: "#808080",
        },
      },
      axisLabel: {
        color: "#808080",
        fontWeight: "500",
        // interval: 1,
      },
      axisTick:{
        show:false
      },
    }],
    yAxis:{
      name: '浓度(μg/m³)',
      type: "value",
      minInterval:1,
      nameTextStyle: {
        color: "#4D4D4D"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#CCCCCC",
        },
      },
      axisLine: {
        show:false,
      },
      axisTick:{
        show:false
      },
      axisLabel: {
        show:true,
        color: "#808080",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      formatter:(name:any)=>{
        return `<div>
<div>${name[0].marker}${name[0].seriesName?.split('{')[0]}: ${name[0].data}</div>
<div>${name[1].marker}${name[1].seriesName?.split('{')[0]}: ${name[1].data}</div>
<div>${name[2].marker}${name[1].seriesName?.split('{')[0]}: ${name[2].data}</div>
</div>`
      }
    },
    grid: {
      //布局
      show: false,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "50px",
      containLabel: true,
    },
    legend: {
      top:'5',
      right: '0',
      icon: 'circle',
      textStyle:{
        color:'#4D4D4D',
        fontSize: 12,
        rich:{
          a:{
            color:'#808080',
            fontSize: 10
          }
        }
      }
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: false,
        showSymbol:true,
        symbol: "emptyCircle",
        name: `pm1`,
        color: "#F7B500",
        itemStyle:{
          normal:{
            lineStyle:{
              width:2,
              type:'dotted'  //'dotted'虚线 'solid'实线
            }
          }
        },
      },
      {
        data: yData2,
        yAxisIndex:0,
        type: "line",
        smooth: false,
        showSymbol:true,
        symbol: "emptyCircle",
        name: `pm2.5`,
        color: "#FB2D19",
        itemStyle:{
          normal:{
            lineStyle:{
              width:2,
              type:'dotted'  //'dotted'虚线 'solid'实线
            }
          }
        },
      },
      {
        data: yData3,
        yAxisIndex:0,
        type: "line",
        smooth: false,
        showSymbol:true,
        symbol: "emptyCircle",
        name: `pm10`,
        color: "#FC7916",
        itemStyle:{
          normal:{
            lineStyle:{
              width:2,
              type:'dotted'  //'dotted'虚线 'solid'实线
            }
          }
        },
      },
    ],
  };
};

watch(()=>props.lists, (newval:any)=>{
  const val = cloneDeep(newval).reverse()
  setOption(val?.map((v:any)=>v.pm1),val?.map((v:any)=>v.pm25),val?.map((v:any)=>v.pm10),val?.map((v:any)=>v.name))
},{
  deep:true,
  immediate:true
})

</script>

<template>
  <div class="pl-[47px] pr-[41px]">
    <div class="flex items-center justify-between mt-[20px]">
      <div class="flex items-center">
        <img class="w-[16px] h-[16px]" src="@/assets/img/icon/5.png" alt="">
        <span class="text-[14px] text-[#FB2D19] ml-[4px] font-medium">当前室内空气需开窗通风</span>
      </div>
      <div class="flex items-center justify-center ">
        <div class="w-[68px] h-[26px] flex items-center justify-center text-[#FFFFFF] text-[16px] bg1">良</div>
        <div class="w-[68px] h-[26px] flex items-center justify-center text-[#FFFFFF] text-[16px] ml-[16px] bg2">优</div>
      </div>
    </div>
    <div class="mt-[18px] flex items-center justify-between">
      <div class="w-[146px] h-[109px] flex flex-col items-center pm2">
        <div class="text-[16px] text-[#4D4D4D] ff-DINAlternate-Bold"><span class="text-[28px] text-[#FB2D19]">{{ data[3]?.[2]?.value }}</span>μg/m³</div>
        <div class="text-[#1A1A1A] text-[18px] font-medium">pm1.0</div>
      </div>
      <div class="w-[146px] h-[109px] flex flex-col items-center pm1" :class="{
        pm1: data[3]?.[1]?.value <= 25,
        pm2: data[3]?.[1]?.value > 25
      }">
        <div class="text-[16px] text-[#4D4D4D] ff-DINAlternate-Bold"><span class="text-[28px] text-[#FB2D19]">{{ data[3]?.[0]?.value }}</span>μg/m³</div>
        <div class="text-[#1A1A1A] text-[18px] font-medium">pm2.5</div>
      </div>
      <div class="w-[146px] h-[109px] flex flex-col items-center pm1" :class="{
        pm1: data[3]?.[1]?.value / 1000 <= 0.5,
        pm2: data[3]?.[1]?.value / 1000 > 0.5
      }">
        <div class="text-[16px] text-[#4D4D4D] ff-DINAlternate-Bold"><span class="text-[28px] text-[#FB2D19]">{{ data[3]?.[1]?.value }}</span>μg/m³</div>
        <div class="text-[#1A1A1A] text-[18px] font-medium">pm10</div>
      </div>
    </div>
    <div class="mt-[23px]">
      <v-chart class="chart" :option="option"/>
    </div>
  </div>
</template>

<style lang="scss">
.bg1{
  background: url("@/assets/img/rt/21.png") 0 0 /100% 100% no-repeat;
}
.bg2{
  background: url("@/assets/img/rt/28.png") 0 0 /100% 100% no-repeat;
}

.pm1{
  background: url("@/assets/img/hj/7.png") 0 0 /100% 100% no-repeat;
}

.pm2{
  background: url("@/assets/img/hj/6.png") 0 0 /100% 100% no-repeat;
}

.chart{
  width: 100%;
  height: 245px;
}
</style>
